﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>FooTable - jQuery plugin for responsive HTML tables</title>
        <meta name="viewport" content="width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no"/>
        <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
        <link href="../css/footable.core.css?v=2-0-1" rel="stylesheet" type="text/css"/>
        <link href="css/footable-demos.css" rel="stylesheet" type="text/css"/>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
        <script>
            if (!window.jQuery) { document.write('<script src="js/jquery-1.9.1.min.js"><\/script>'); }
        </script>
        <script src="js/bootstrap-tab.js" type="text/javascript"></script>
        <script src="js/demos.js" type="text/javascript"></script>
        <script src="../js/footable.js?v=2-0-1" type="text/javascript"></script>
        <script src="../js/footable.grid.js" type="text/javascript"></script>
        <script src="../js/footable.sort.js" type="text/javascript"></script>
        <script src="../js/footable.paginate.js" type="text/javascript"></script>
    </head>
    <body>
        <div class="demo-container">
          <ul class="breadcrumb">
              <li><a href="http://fooplugins.com/plugins/footable-jquery/">FooTable</a> <span class="divider">&raquo;</span></li>
              <li><a href="index.htm">Demos</a> <span class="divider">&raquo;</span></li>
              <li class="active">Grid</li>
          </ul>
          <div class="alert">
              A simple grid plugin to make a footable
          </div>
          <ul class="nav nav-tabs">
            <li class="active"><a href="#demo">Demo</a></li>
            <li><a href="#setup">Setup</a></li>
            <li><a href="#docs">Docs</a></li>
          </ul>
          <div class="tab-content">
            <div class="tab-pane active" id="demo">
              <table class="footable table table-bordered"></table>
            </div>
            <div class="tab-pane" id="setup">
              
            </div>
            <div class="tab-pane" id="docs">
              
            </div>
          </div>
        </div>
    </div>
    <script type="text/javascript">
                    $(function () {
                $('table').footable({
                        grid:{
                        activeClass:'info',
                        showIndex:true,
                        showCheckbox:true,
                        showEmptyInfo:true,
                        cols:[
                            { title:'First Name', name:'First'},
                            { title:'Last Name', name:'Last'},
                            { title:'Job Title', name:'Job', data:{
                            "hide":"phone,tablet"
                            }},
                            { title:'DOB', name:'DOB', data:{
                            "hide":"phone,tablet"
                            }, formatter: function(val,$td,index){
                            $td.html(new Date(val).toLocaleDateString());
                            $td.attr("data-value",val);
                            }},
                            { title:'Status', name:'Status', data:{
                              "hide":"phone"
                            }, formatter:function(val,$td,index){
                            var title = 'Active';
                            if(val === 2){
                                title = 'Disabled';
                            }else if(val === 3){
                                title = 'Suspended';
                            }
                            $td.html('<span class="status-metro status-'+title.toLowerCase()+'" title="'+title+'">'+title+'</span>');
                            $td.attr("data-value",val);
                            }},
                            { title:'Actions', name:'' ,data:{
                            "sort-ignore":true
                            } ,formatter: function(){
                                    return '<button  class="btn btn-danger">DELETE</button>'
                                }}],
                        items:[
                            {
                        "First":"Isidra",
                        "Last":"Boudreaux",
                        "Job":"Traffic Court Referee",
                        "DOB":78025368997,
                        "Status":1
                        },
                        {
                        "First":"Shona",
                        "Last":"Woldt",
                        "Job":"Airline Transport Pilot",
                        "DOB":370961043292,
                        "Status":2
                        },
                        {
                        "First":"Granville",
                        "Last":"Leonardo",
                        "Job":"Business Services Sales Representative",
                        "DOB":-22133780420,
                        "Status":3
                        },
                        {
                        "First":"Easer",
                        "Last":"Dragoo",
                        "Job":"Drywall Stripper",
                        "DOB":250833505574,
                        "Status":1
                        },
                        {
                        "First":"Maple",
                        "Last":"Halladay",
                        "Job":"Aviation Tactical Readiness Officer",
                        "DOB":694116650726,
                        "Status":3
                        },
                        {
                        "First":"Maxine",
                        "Last":"Woldt",
                        "Job":"Business Services Sales Representative",
                        "DOB":561440464855,
                        "Status":2
                        },
                        {
                        "First":"Lorraine",
                        "Last":"Mcgaughy",
                        "Job":"Hemodialysis Technician",
                        "DOB":437400551390,
                        "Status":2
                        },
                        {
                        "First":"Lizzee",
                        "Last":"Goodlow",
                        "Job":"Technical Services Librarian",
                        "DOB":-257733999319,
                        "Status":3
                        },
                        {
                        "First":"Judi",
                        "Last":"Badgett",
                        "Job":"Electrical Lineworker",
                        "DOB":362134712000,
                        "Status":1
                        },
                        {
                        "First":"Lauri",
                        "Last":"Hyland",
                        "Job":"Blackjack Supervisor",
                        "DOB":500874333932,
                        "Status":3
                        }
                            ]
                        }
                    });
                    }).on("footable_grid_loaded",function(e){
                      var grid = $(e.ft.table).data("grid");
                      $(e.ft.table).on("click","tbody .btn-danger",function(event){
                        var index = $(event.target).closest("tr").data("index");
                        console.log(grid.removeItem(index));
                        return false;
                      });
                    });
    </script>
</body>
</html>